<template>
    <div class="containner">
        <div class="goodsCard" v-if="cartGoodsList[0].cartAmount !== undefined">
            <input type="checkbox" :checked="$store.getters.isChecked" @change="handleCheck(!$store.getters.isChecked)">
            <div class="card">
                <van-swipe-cell left-width="100" v-for="(item, index) in cartGoodsList" :key="index">

                    <van-card class="goods-card" :price="Number(item.price).toFixed(2)" :title="item.name"
                        :thumb="item.img">
                        <template #num>
                            <van-stepper v-model="item.cartAmount" />
                        </template>
                    </van-card>
                    <template #right>
                        <van-button @click="handleRemoveGood" square text="删除" type="danger" class="delete-button" />
                    </template>
                </van-swipe-cell>
            </div>

        </div>
        <div class="empty" v-else>
            <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                description="购物车空空如也，快去选购商品吧~~~" />
        </div>


        <van-submit-bar :price="totalPrice" button-text="结算" @submit="onSubmit"
            v-if="cartGoodsList[0].cartAmount !== undefined">
            <input type="checkbox" :checked="$store.getters.isChecked"
                @change="handleAllCheck(!$store.getters.isChecked)">全选
        </van-submit-bar>
    </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
    name: "",
    data() {
        return {
            cartGoodsList: [],
        }
    },
    created() {
        this.cartGoodsList.push(this.$store.getters.cartData);
    },
    methods: {
        handleRemoveGood() {
            Dialog.confirm({
                title: '购物车提示',
                message:
                    '只剩最后一种商品了，确定要删除么？',
            })
                .then(() => {
                    this.$store.dispatch('acDelGood')
                    this.cartGoodsList = [{}];
                })
                .catch(() => {
                    return
                });
        },
        onSubmit() {
            this.$router.push({
                path: '/pay',
                query: this.cartGoodsList[0]
            })
        },
        handleCheck(checkState) {
            this.$store.dispatch('commitGoodsChecked', checkState)
        },
        handleAllCheck(checkState1) {
            this.$store.dispatch('commitGoodsAllChecked', checkState1)
        },
    },
    computed: {
        totalPrice() {
            return (this.cartGoodsList[0].price * this.cartGoodsList[0].cartAmount) * 100
        }
    }
}
</script>

<style lang="less" scoped>
.containner {
    margin-top: 50px;
    .goodsCard {
        height: 100px;
        background-color: white;
        display: flex;
        align-items: center;
        input{
            display: inline-block;
            width: 10%;
        }
        .card {
            width: 90%;
            height: 100%;
        }
    }

    .delete-button {
        height: 100%;
    }
}
</style>